<template>
  <div class="link-list" :style="{ backgroundColor: modelValue?.bgColor }" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="link-list__container justify-content-center"  :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
      <link-list :list="modelValue?.data" @handleClick="handleClick"></link-list>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
  <ProfileModel v-model:show="showProfile" :data="profileData"></ProfileModel>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { randomString } from '@/utils/common'
import Setting from './setting.vue'
import Operate from '@/common/Operate/index.vue'
import ProfileModel from '@/common/Profile/modal.vue'
import linkList from './linkList.vue'

// 定义组件名称
defineOptions({
  name: 'LinkList'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'LinkList',
    width: '',
    bgColor: '',
    data: [
      {
        id: randomString(),
        type: 'circle',
        text: '了解更多',
        url: 'https://www.baidu.com',
        isExternal: false,
        isLight: false
      },
      {
        id: randomString(),
        type: 'circle',
        text: '了解更多',
        url: 'https://www.baidu.com',
        isExternal: false,
        isLight: true
      },
      {
        id: randomString(),
        type: 'text',
        text: '了解更多',
        profile: {
          logo: 'https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png',
          title: '耀华国际教育学校浙江桐乡',
          subTitle: '耀华国际教育学校浙江桐乡',
          name: '耀华国际教育学校浙江桐乡',
          label: '123',
          imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
          alt: '',
          buttonList: {
            id: props.modelValue?.id || randomString(),
            type: 'BtnList',
            readOnly: true,
            width: '',
            bgColor: '',
            data: [
              {
                id: randomString(),
                type: 'white',
                text: '了解更多',
                url: 'https://www.baidu.com',
                isExternal: false
              },
              {
                id: randomString(),
                type: 'light',
                text: '了解更多',
                url: 'https://www.baidu.com',
                isExternal: false
              }
            ]
          },
          paragraphs: [{
            id: randomString(),
            title: '123',
            content: '123'
          }]
        }
      }
    ]
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

const showProfile = ref<boolean>(false)
const profileData = ref<any>({})
const handleClick = (item: any) => {
  if (item.type !== 'text') return
  profileData.value = item.profile
  showProfile.value = true
}

handleInit()
</script>

<style lang="scss" scoped>
.link-list {
  position: relative;
}

.link-list__container {
  display: flex;
  align-items: center;
}

.justify-content-center {
  justify-content: center!important
}
</style>